<html>

<head>
    <link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.12.1.custom.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/css/opensans/opensans.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome-4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/options_main_page.css" />
    <link rel="stylesheet" type="text/css" href="block_rules.css" />

    <script src="/lib/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="/lib/jquery-ui-1.12.1.custom.min.js" type="text/javascript"></script>
    <script src="/lib/custom_i18n.js" type="text/javascript"></script>
    <script src="/lib/i18n_translator.js" type="text/javascript"></script>
    <script src="/lib/object-watch.js" type="text/javascript"></script>
    <script src="/js/utils.js" type="text/javascript"></script>
    <script src="/js/data.js" type="text/javascript"></script>

    <script src="options_page_chooser.js" type="text/javascript"></script>
    <script src="block_rules.js" type="text/javascript"></script>

    <title i18n="Blocked_Cookies"></title>
</head>

<body>
    <div id="navigation">
        <h1>EditThisCookie</h1>
        <ul>
            <li class="chooser" id="getting_started" i18n="getting_started"></li>
            <li class="chooser" id="user_preferences" i18n="Options"></li>
            <li class="chooser selected" id="block_rules" i18n="Blocked_Cookies"></li>
            <li class="chooser" id="readonly_rules" i18n="Protected_Cookies"></li>
        </ul>
    </div>

    <div id="rules-box" class="box">
        <h1 i18n="Blocked_Cookies"></h1>
        <hr>

        <div class="new_rule_operations">
            <span class="cmd_accept" i18n_title="addRule">
                <i class="fa fa-check"></i>
            </span>
            <span class="cmd_cancel" i18n_title="cancel">
                <i class="fa fa-times"></i>
            </span>
        </div>

        <div id="addRule" class="button" i18n="Flag_Cookie">
            <i class="fa pull-left fa-plus" style=""></i>
        </div>

        <div class="table">
            <div class="operations">
                <span class="cmd_delete" i18n_title="Alert_deleteRule">
                    <i class="fa fa-trash-o"></i>
                </span>
            </div>

            <div class="table_row header">
                <div style="padding-left: 35px !important;" i18n="domain"></div>
                <div i18n="name"></div>
                <div i18n="value"></div>
            </div>

            <div class="table_row data_row" id="line_template" style="display:none;">
                <div class="domain_field">.example.com</div>
                <div class="name_field">bbsessionhash</div>
                <div class="value_field">99b3123f5asads0f1d2f246a869</div>
            </div>

            <div class="table_row template" id="no_rules">
                <div class="domain_field" i18n="noBlockAdded"></div>
                <div class="name_field"></div>
                <div class="value_field"></div>
            </div>

            <div class="table_row new_row template">
                <div class="domain_field">
                    <input type="text" value="any" class="new_rule_domain" style="width: 100%;">
                </div>
                <div class="name_field">
                    <input type="text" value="any" class="new_rule_name" style="width: 100%;">
                </div>
                <div class="value_field">
                    <input type="text" value="any" class="new_rule_value" style="width: 100%;">
                </div>
            </div>
        </div>

        <div id="newRule" class="box popup">
            <div class="title" i18n="Flag_New_Cookie"></div>
            <br>
            <label class="inputLabel" i18n="domain"></label>
            <input id="ruleDomain" type="text" value="any" onfocus="if (this.value=='any') this.value='';">
            <br>
            <label class="inputLabel" i18n="name"></label>
            <input id="ruleName" type="text" value="any" onfocus="if (this.value=='any') this.value='';">
            <br>
            <label class="inputLabel" i18n="value"></label>
            <input id="ruleValue" type="text" value="any" onfocus="if (this.value=='any') this.value='';">
            <br>
            <div style="margin-top:10px;font-size: smaller;color: #949494; text-align: center" i18n="useRegularExpressions"></div>
            <div id="submitDiv">
                <input onClick='submitRule()' id='submitButton' type='submit' value='' i18n="Alert_submitAll" />
            </div>
        </div>
    </div>
</body>

</html>